<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
export default {
  name: "App",
  components: { ThemePicker },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  data() {
    return {
      screenWidth: 0
    };
  },
  created() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenWidth = window.innerWidth;
    }
  },
  computed: {
    containerClass() {
      if (this.screenWidth >= 1200) {
        return 'container'; // Bootstrap's large container class
      } else if (this.screenWidth >= 992) {
        return 'container'; // Bootstrap's medium container class
      } else {
        return 'container-sm'; // Bootstrap's small container class
      }
    }
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
#app {
  width: 100vw;
  height: 100vh;
  /* overflow: hidden; */
}
</style>
